<template>
  <div id="con">
    <button id="dsBut" @click="DrawerStzte = !DrawerStzte">
      点击充电
      <div class="star-1">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="25" height="25">
          <path
            fill="#fd1853"
            d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"
          ></path>
        </svg>
      </div>
      <div class="star-2">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20">
          <path
            fill="#fd1853"
            d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"
          ></path>
        </svg>
      </div>
      <div class="star-3">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="9" height="9">
          <path
            fill="#fd1853"
            d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"
          ></path>
        </svg>
      </div>
      <div class="star-4">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="10" height="10">
          <path
            fill="#fd1853"
            d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"
          ></path>
        </svg>
      </div>
      <div class="star-6">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="7" height="7">
          <path
            fill="#fd1853"
            d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"
          ></path>
        </svg>
      </div>
    </button>

    <div id="tube-con">
      <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20" />
        <path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20" />
        <path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20" />
        <path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20" />
        <rect y="186" width="236" height="24" fill="#e5e9ef" />
        <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
        <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
        <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef" />
        <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
      </svg>
      <div id="mask">
        <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20" />
          <path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20" />
          <path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20" />
          <path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20" />
          <rect y="186" width="236" height="24" fill="#f25d8e" />
          <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" />
          <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
          <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e" />
          <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
        </svg>
      </div>
      <div id="orange-mask">
        <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20" />
          <path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20" />
          <path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20" />
          <path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20" />
          <rect y="186" width="236" height="24" fill="#ffd52b" />
          <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" />
          <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
          <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b" />
          <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
        </svg>
      </div>
      <p id="people">
        充电中···
        <!-- <b v-if="begData">{{ begData.total }}</b> -->
        <!-- 人 -->
      </p>
    </div>
  </div>

  <Modal
    v-model="DrawerStzte"
    :styles="{ top: '200px' }"
    :footer-hide="true"
    :lock-scroll="false"
    :closable="false"
  >
    <h3 style="text-align: center"> 感谢您的支持，支付时请备注：【打赏博客 - 姓名或昵称】 </h3>
    <div style="display: flex; justify-content: space-around; padding: 20px">
      <Image src="/pay/wx.png" width="40%" />
      <Image src="/pay/zfb.png" width="40%" />
    </div>
    <div style="display: flex; justify-content: center">
      <Button
        shape="circle"
        icon="md-close"
        size="large"
        style="font-size: 32px; width: 50px; height: 50px"
        @click="DrawerStzte = !DrawerStzte"
      ></Button>
    </div>
  </Modal>
</template>
<script setup>
  import api from '@/api/index';

  const DrawerStzte = ref(false); //打赏-弹出层状态
  const begData = ref(); //打赏名单
  // 查询打赏名单
  const findBeg = () => {
    api.getFindBeg({ pageSize: 999 }).then((res) => {
      if (res.msg == '成功') {
        begData.value = res.data;
      }
    });
  };
  onMounted(() => {
    findBeg();
  });
</script>
<style scoped>
  /* 设置容器 */
  #con {
    width: 285px;
    height: 85px;
    position: relative;
    display: flex;
    align-items: center;
  }

  /* 设置文本居中容器 */
  #text-con {
    width: 100px;
    height: 100%;
    margin: 0 auto;
    position: relative;
  }

  /* 做一个小闪电 */
  #linght {
    width: 0;
    height: 0;
    position: absolute;
    top: 36%;
    left: 4px;
    border-color: transparent;
    border-style: solid;
    border-width: 10px;
    border-top: 10px solid #fff;
    border-radius: 4px;
    transform: rotate(-55deg);
  }

  #linght::after {
    position: absolute;
    top: -13px;
    left: -11px;
    content: '';
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 10px;
    border-top: 10px solid #fff;
    transform: rotate(180deg);
    border-radius: 4px;
  }

  /* 文字 */
  #TA {
    float: right;
    line-height: 50px;
    font-size: 15px;
    color: #fff;
  }

  /* 创建图形容器 */
  #tube-con {
    width: 157px;
    height: 55px;
    position: absolute;
    right: -5px;
    top: 15px;
  }

  /* 对svg图形设置宽高 */
  svg {
    width: 100%;
    height: 100%;
  }

  /* 创建一个蒙版 宽度为0，当我hover充电框的时候，宽度展开 */
  #mask {
    width: 0px;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s;
  }

  /* 对蒙版的sbg单独设置宽高，保证宽度高低有一个固定值而不是百分比 */
  #mask svg {
    width: 157px;
    height: 55px;
  }

  /* 对充电框hover的时候开始动画，将粉色线条铺开 */
  #dsBut:hover + #tube-con > #mask {
    width: 157px;
  }

  /* 对充电框hover的时候开始动画，添加黄色快速移动的动画 */
  #dsBut:hover + #tube-con > #orange-mask {
    animation: move1 0.5s linear 0.2s infinite;
  }

  #dsBut:hover + #tube-con > #orange-mask svg {
    animation: movetwo 0.5s linear 0.2s infinite;
  }

  /* 创建黄色移动的蒙版 */
  #orange-mask {
    width: 18px;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: -15px;
    top: 0px;
  }

  /* 创建黄色移动的内容 */
  #orange-mask svg {
    position: absolute;
    top: 0;
    left: 15px;
    width: 157px;
    height: 55px;
  }

  @keyframes move1 {
    0% {
      left: -15px;
    }

    100% {
      left: 140px;
    }
  }

  @keyframes movetwo {
    0% {
      left: 15px;
    }

    100% {
      left: -140px;
    }
  }

  #people {
    position: absolute;
    right: 25px;
    top: 18px;
    font-size: 12px;
    font-family: '雅黑';
    color: #aaa;
  }

  #people > b {
    color: #777;
  }

  .verticalModal {
    background-color: #fff;
  }

  @media (max-width: 800px) {
    #tube-con {
      display: none;
    }
  }

  /* 对充电框hover的时候开始动画，将粉色线条铺开 */
  #dsBut:hover + #tube-con > #mask {
    width: 157px;
  }

  /* 对充电框hover的时候开始动画，添加黄色快速移动的动画 */
  #dsBut:hover + #tube-con > #orange-mask {
    animation: move1 0.5s linear 0.2s infinite;
  }

  #dsBut:hover + #tube-con > #orange-mask svg {
    animation: movetwo 0.5s linear 0.2s infinite;
  }

  /* ----------------------按钮特效爱心------------------------- */
  #dsBut {
    background: linear-gradient(45deg, transparent 27%, #f25d8e 5%, #f25d8e 73%, transparent 27%);
    box-shadow: 6px 0px 0px #00e6f6;
    position: relative;
    padding: 10px 35px;
    font-size: 15px;
    font-weight: 500;
    color: white;
    border: 3px solid #00e6f6;
    border-radius: 8px;
    box-shadow: 0 0 0 #fec1958c;
    transition: all 0.3s ease-in-out;
    /* background-color: #f25d8e; */
    cursor: pointer;
  }

  .star-1 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 25px;
    height: auto;
    filter: drop-shadow(0 0 0 #fd1853);
    z-index: -5;
    transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
  }

  .star-2 {
    position: absolute;
    top: 45%;
    left: 45%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 0 #fd1853);
    z-index: -5;
    transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
  }

  .star-3 {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 0 #fd1853);
    z-index: -5;
    transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
  }

  .star-4 {
    position: absolute;
    top: 20%;
    left: 40%;
    width: 8px;
    height: auto;
    filter: drop-shadow(0 0 0 #fd1853);
    z-index: -5;
    transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
  }

  .star-6 {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 0 #fd1853);
    z-index: -5;
    transition: all 0.8s ease;
  }

  #dsBut:hover {
    background: transparent;
    color: #00e6f6;
    box-shadow: 0 0 50px #fd1853;
  }

  #dsBut:hover .star-1 {
    position: absolute;
    top: -80%;
    left: -30%;
    width: 25px;
    height: auto;
    filter: drop-shadow(0 0 10px #fd1853);
    z-index: 2;
  }

  #dsBut:hover .star-2 {
    position: absolute;
    top: -25%;
    left: 10%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 10px #fd1853);
    z-index: 2;
  }

  #dsBut:hover .star-3 {
    position: absolute;
    top: 55%;
    left: 25%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 10px #fd1853);
    z-index: 2;
  }

  #dsBut:hover .star-4 {
    position: absolute;
    top: 30%;
    left: 80%;
    width: 8px;
    height: auto;
    filter: drop-shadow(0 0 10px #fd1853);
    z-index: 2;
  }

  #dsBut:hover .star-6 {
    position: absolute;
    top: 5%;
    left: 60%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 10px #fd1853);
    z-index: 2;
  }

  .fil0 {
    fill: #fd1853;
  }
  /* ----------------------按钮特效爱心结束------------------------- */
</style>
